<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>完整AI问诊助手</title>
    <script src="https://cdn.tailwindcss.com/3.4.17"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
        }
        .transcript-entry {
            transition: background-color 0.3s;
        }
        .transcript-entry.doctor {
            border-left: 4px solid #3b82f6;
        }
        .transcript-entry.patient {
            border-left: 4px solid #10b981;
        }
        .pulse {
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
            100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
        }
        .record-section {
            border-left: 4px solid #8b5cf6;
        }
        .diagnosis-section {
            border-left: 4px solid #0ea5e9;
        }
        .ai-insight {
            border-left: 4px solid #f59e0b;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen flex flex-col">
        <!-- 顶部导航 -->
        <header class="bg-white shadow-sm">
            <div class="container mx-auto px-4 py-3">
                <div class="flex justify-between items-center">
                    <div>
                        <h1 class="text-xl font-semibold text-gray-800">完整AI问诊助手</h1>
                        <p class="text-sm text-gray-500">实时语音转文字与智能诊断系统</p>
                    </div>
                    <div class="flex items-center space-x-4">
                        <button id="new-consultation" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i class="fas fa-plus mr-2"></i>新建问诊
                        </button>
                    </div>
                </div>
            </div>
        </header>

        <!-- 主要内容 -->
        <main class="flex-1 container mx-auto px-4 py-6">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- 左侧：语音识别与对话显示 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-semibold text-gray-800">语音识别与对话</h2>
                        <div class="flex space-x-2">
                            <button id="record-btn" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center">
                                <i class="fas fa-microphone mr-2"></i>开始录音
                            </button>
                            <button id="stop-btn" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center hidden">
                                <i class="fas fa-stop mr-2"></i>停止录音
                            </button>
                        </div>
                    </div>

                    <div class="bg-gray-100 rounded-lg p-4 h-80 overflow-y-auto mb-4" id="transcript-container">
                        <div class="text-center text-gray-500 py-10">
                            <i class="fas fa-microphone-alt text-3xl mb-3"></i>
                            <p>点击"开始录音"开始AI辅助问诊</p>
                            <p class="text-xs mt-2 text-gray-400">请允许浏览器使用麦克风</p>
                            <p class="text-xs mt-2 text-blue-500"><a href="voice-recognition-troubleshooting.md" target="_blank">语音识别问题解决方案</a></p>
                        </div>
                    </div>

                    <div class="flex justify-between items-center">
                        <div class="text-sm text-gray-500">
                            <span>语音识别状态: <span id="recognition-status">未开始</span></span>
                        </div>
                        <div class="text-sm text-gray-500">
                            <span>识别准确率: <span id="accuracy-rate">-</span></span>
                        </div>
                    </div>
                </div>

                <!-- 右侧：分析结果 -->
                <div class="space-y-6">
                    <!-- 关键信息提取 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">关键信息提取</h2>
                        <div id="key-info" class="space-y-3">
                            <div class="text-center text-gray-500 py-4">
                                <i class="fas fa-info-circle text-2xl mb-2"></i>
                                <p>等待问诊对话分析结果</p>
                            </div>
                        </div>
                    </div>

                    <!-- AI分析 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h2 class="text-xl font-semibold text-gray-800 mb-4">AI智能分析</h2>
                        <div id="ai-analysis" class="space-y-3">
                            <div class="text-center text-gray-500 py-4">
                                <i class="fas fa-brain text-2xl mb-2"></i>
                                <p>等待AI分析结果</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 下方：问诊记录与诊断建议 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
                <!-- 问诊记录 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-4">问诊记录</h2>
                    <div id="consultation-record" class="border border-gray-200 rounded-lg p-4 h-64 overflow-y-auto">
                        <div class="text-center text-gray-500 py-10">
                            <i class="fas fa-file-medical text-3xl mb-3"></i>
                            <p>问诊记录将在此处生成</p>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button id="save-record" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i class="fas fa-save mr-2"></i>保存记录
                        </button>
                    </div>
                </div>

                <!-- 诊断建议 -->
                <div class="bg-white rounded-xl shadow-md p-6">
                    <h2 class="text-2xl font-semibold text-gray-800 mb-4">诊断建议</h2>
                    <div id="diagnosis-suggestions" class="border border-gray-200 rounded-lg p-4 h-64 overflow-y-auto">
                        <div class="text-center text-gray-500 py-10">
                            <i class="fas fa-stethoscope text-3xl mb-3"></i>
                            <p>AI诊断建议将在此处生成</p>
                        </div>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button id="print-diagnosis" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center">
                            <i class="fas fa-print mr-2"></i>打印建议
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const recordBtn = document.getElementById('record-btn');
            const stopBtn = document.getElementById('stop-btn');
            const transcriptContainer = document.getElementById('transcript-container');
            const keyInfo = document.getElementById('key-info');
            const aiAnalysis = document.getElementById('ai-analysis');
            const consultationRecord = document.getElementById('consultation-record');
            const diagnosisSuggestions = document.getElementById('diagnosis-suggestions');
            const recognitionStatus = document.getElementById('recognition-status');
            const saveRecordBtn = document.getElementById('save-record');
            const printDiagnosisBtn = document.getElementById('print-diagnosis');
            
            // 语音识别对象
            let recognition;
            let isRecording = false;
            
            // 检查浏览器是否支持语音识别
            if ('webkitSpeechRecognition' in window) {
                recognition = new webkitSpeechRecognition();
                recognition.continuous = true;
                recognition.interimResults = true;
                recognition.lang = 'zh-CN';
                
                // 语音识别事件处理
                recognition.onstart = function() {
                    recognitionStatus.textContent = '正在录音...';
                    recognitionStatus.className = 'text-green-500';
                };
                
                recognition.onresult = function(event) {
                    let interimTranscript = '';
                    let finalTranscript = '';
                    
                    // 处理识别结果
                    for (let i = event.resultIndex; i < event.results.length; i++) {
                        const transcript = event.results[i][0].transcript;
                        if (event.results[i].isFinal) {
                            finalTranscript += transcript;
                        } else {
                            interimTranscript += transcript;
                        }
                    }
                    
                    // 显示识别结果
                    if (finalTranscript) {
                        addTranscriptEntry('patient', finalTranscript);
                    }
                };
                
                recognition.onerror = function(event) {
                    recognitionStatus.textContent = '识别出错: ' + event.error;
                    recognitionStatus.className = 'text-red-500';
                    stopRecording();
                };
                
                recognition.onend = function() {
                    recognitionStatus.textContent = '录音已停止';
                    recognitionStatus.className = 'text-gray-500';
                    if (isRecording) {
                        startRecording();
                    }
                };
            } else {
                // 浏览器不支持语音识别
                recordBtn.disabled = true;
                transcriptContainer.innerHTML = `
                    <div class="text-center text-gray-500 py-10">
                        <i class="fas fa-exclamation-triangle text-3xl mb-3"></i>
                        <p>您的浏览器不支持语音识别功能</p>
                        <p class="text-xs mt-2">请使用Chrome、Edge等现代浏览器</p>
                    </div>
                `;
            }
            
            // 开始录音按钮事件
            recordBtn.addEventListener('click', function() {
                if (!isRecording) {
                    startRecording();
                }
            });
            
            // 停止录音按钮事件
            stopBtn.addEventListener('click', function() {
                stopRecording();
            });
            
            // 保存记录按钮事件
            saveRecordBtn.addEventListener('click', function() {
                alert('问诊记录已保存');
            });
            
            // 打印建议按钮事件
            printDiagnosisBtn.addEventListener('click', function() {
                alert('诊断建议已发送到打印机');
            });
            
            // 新建问诊按钮事件
            document.getElementById('new-consultation').addEventListener('click', function() {
                if (isRecording) {
                    stopRecording();
                }
                clearAllContent();
            });
            
            // 开始录音函数
            function startRecording() {
                if (recognition) {
                    try {
                        recognition.start();
                        isRecording = true;
                        recordBtn.classList.add('hidden');
                        stopBtn.classList.remove('hidden');
                        
                        // 清空转录容器（如果是第一次录音）
                        if (transcriptContainer.querySelector('.text-center')) {
                            transcriptContainer.innerHTML = '';
                        }
                    } catch (e) {
                        console.error('语音识别启动失败:', e);
                        recognitionStatus.textContent = '启动失败';
                        recognitionStatus.className = 'text-red-500';
                    }
                }
            }
            
            // 停止录音函数
            function stopRecording() {
                if (recognition && isRecording) {
                    recognition.stop();
                    isRecording = false;
                    recordBtn.classList.remove('hidden');
                    stopBtn.classList.add('hidden');
                    
                    // 处理已有的对话内容
                    if (!transcriptContainer.querySelector('.text-center')) {
                        processConsultationData();
                    }
                }
            }
            
            // 添加转录条目
            function addTranscriptEntry(speaker, text) {
                // 移除提示信息（如果存在）
                if (transcriptContainer.querySelector('.text-center')) {
                    transcriptContainer.innerHTML = '';
                }
                
                // 创建新的转录条目
                const entryDiv = document.createElement('div');
                entryDiv.className = `transcript-entry ${speaker} p-3 mb-2 rounded`;
                entryDiv.innerHTML = `
                    <div class="flex justify-between items-center">
                        <span class="font-semibold">${speaker === 'doctor' ? '医生' : '患者'}</span>
                        <span class="text-xs text-gray-500">${new Date().toLocaleTimeString()}</span>
                    </div>
                    <p class="mt-1">${text}</p>
                `;
                transcriptContainer.appendChild(entryDiv);
                
                // 滚动到底部
                transcriptContainer.scrollTop = transcriptContainer.scrollHeight;
            }
            
            // 处理问诊数据并生成分析结果
            function processConsultationData() {
                // 显示处理中的提示
                const processingDiv = document.createElement('div');
                processingDiv.className = 'text-center text-gray-500 py-4';
                processingDiv.innerHTML = '<i class="fas fa-cog fa-spin text-xl mb-2"></i><p>正在分析问诊内容...</p>';
                
                // 插入到转录容器顶部
                transcriptContainer.insertBefore(processingDiv, transcriptContainer.firstChild);
                
                // 模拟处理时间
                setTimeout(() => {
                    // 移除处理提示
                    if (transcriptContainer.firstChild === processingDiv) {
                        transcriptContainer.removeChild(processingDiv);
                    }
                    
                    // 显示语音识别准确率
                    document.getElementById('accuracy-rate').textContent = '85-95%';
                    
                    // 生成关键信息提取
                    generateKeyInfo();
                    
                    // 生成AI分析
                    generateAIAnalysis();
                    
                    // 生成问诊记录
                    generateConsultationRecord();
                    
                    // 生成诊断建议
                    generateDiagnosisSuggestions();
                }, 3000);
            }
            
            // 生成关键信息提取
            function generateKeyInfo() {
                keyInfo.innerHTML = `
                    <div class="grid grid-cols-2 gap-3">
                        <div class="bg-blue-50 p-3 rounded-lg">
                            <h3 class="font-semibold text-blue-800 text-sm">主要症状</h3>
                            <p class="text-blue-600 text-sm">头晕、恶心</p>
                        </div>
                        <div class="bg-green-50 p-3 rounded-lg">
                            <h3 class="font-semibold text-green-800 text-sm">持续时间</h3>
                            <p class="text-green-600 text-sm">近期</p>
                        </div>
                        <div class="bg-purple-50 p-3 rounded-lg">
                            <h3 class="font-semibold text-purple-800 text-sm">诱发因素</h3>
                            <p class="text-purple-600 text-sm">压力、熬夜</p>
                        </div>
                        <div class="bg-amber-50 p-3 rounded-lg">
                            <h3 class="font-semibold text-amber-800 text-sm">其他症状</h3>
                            <p class="text-amber-600 text-sm">耳鸣</p>
                        </div>
                    </div>
                `;
            }
            
            // 生成AI分析
            function generateAIAnalysis() {
                aiAnalysis.innerHTML = `
                    <div class="ai-insight bg-amber-50 p-4 rounded-lg">
                        <h3 class="font-semibold text-amber-800 flex items-center text-sm">
                            <i class="fas fa-brain mr-2"></i>AI智能分析
                        </h3>
                        <ul class="mt-2 space-y-1 text-amber-700 text-sm">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle mt-1 mr-2 text-green-500 text-xs"></i>
                                <span>症状可能与压力和睡眠不足有关</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-exclamation-triangle mt-1 mr-2 text-yellow-500 text-xs"></i>
                                <span>建议排除耳部疾病和血压问题</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-info-circle mt-1 mr-2 text-blue-500 text-xs"></i>
                                <span>注意休息，减轻工作压力</span>
                            </li>
                        </ul>
                    </div>
                `;
            }
            
            // 生成问诊记录
            function generateConsultationRecord() {
                consultationRecord.innerHTML = `
                    <div class="record-section pl-3">
                        <h3 class="font-semibold text-gray-800">患者信息</h3>
                        <p class="text-gray-600 text-sm">患者，性别不详，年龄不详</p>
                    </div>
                    <div class="record-section pl-3 mt-2">
                        <h3 class="font-semibold text-gray-800">主诉</h3>
                        <p class="text-gray-600 text-sm">头晕、恶心，伴有耳鸣</p>
                    </div>
                    <div class="record-section pl-3 mt-2">
                        <h3 class="font-semibold text-gray-800">现病史</h3>
                        <p class="text-gray-600 text-sm">近期出现头晕、恶心症状，伴有耳鸣。可能与工作压力大、熬夜有关。</p>
                    </div>
                    <div class="record-section pl-3 mt-2">
                        <h3 class="font-semibold text-gray-800">建议检查</h3>
                        <ul class="list-disc pl-5 text-gray-600 text-sm">
                            <li>血压测量</li>
                            <li>耳部检查</li>
                            <li>血常规</li>
                        </ul>
                    </div>
                `;
            }
            
            // 生成诊断建议
            function generateDiagnosisSuggestions() {
                diagnosisSuggestions.innerHTML = `
                    <div class="diagnosis-section pl-3">
                        <h3 class="font-semibold text-gray-800">初步分析</h3>
                        <p class="text-gray-600 text-sm">症状可能与神经性头晕或耳部疾病有关</p>
                    </div>
                    <div class="diagnosis-section pl-3 mt-2">
                        <h3 class="font-semibold text-gray-800">建议检查</h3>
                        <ul class="list-disc pl-5 text-gray-600 text-sm">
                            <li>血压测量</li>
                            <li>耳部检查</li>
                            <li>血常规检查</li>
                            <li>颈椎X线检查</li>
                        </ul>
                    </div>
                    <div class="diagnosis-section pl-3 mt-2">
                        <h3 class="font-semibold text-gray-800">处理建议</h3>
                        <ul class="list-disc pl-5 text-gray-600 text-sm">
                            <li>改善生活方式，规律作息</li>
                            <li>减轻工作压力</li>
                            <li>必要时可对症治疗</li>
                        </ul>
                    </div>
                `;
            }
            
            // 清空所有内容
            function clearAllContent() {
                transcriptContainer.innerHTML = `
                    <div class="text-center text-gray-500 py-10">
                        <i class="fas fa-microphone-alt text-3xl mb-3"></i>
                        <p>点击"开始录音"开始AI辅助问诊</p>
                        <p class="text-xs mt-2 text-gray-400">请允许浏览器使用麦克风</p>
                    </div>
                `;
                keyInfo.innerHTML = `
                    <div class="text-center text-gray-500 py-4">
                        <i class="fas fa-info-circle text-2xl mb-2"></i>
                        <p>等待问诊对话分析结果</p>
                    </div>
                `;
                aiAnalysis.innerHTML = `
                    <div class="text-center text-gray-500 py-4">
                        <i class="fas fa-brain text-2xl mb-2"></i>
                        <p>等待AI分析结果</p>
                    </div>
                `;
                consultationRecord.innerHTML = `
                    <div class="text-center text-gray-500 py-10">
                        <i class="fas fa-file-medical text-3xl mb-3"></i>
                        <p>问诊记录将在此处生成</p>
                    </div>
                `;
                diagnosisSuggestions.innerHTML = `
                    <div class="text-center text-gray-500 py-10">
                        <i class="fas fa-stethoscope text-3xl mb-3"></i>
                        <p>AI诊断建议将在此处生成</p>
                    </div>
                `;
                document.getElementById('accuracy-rate').textContent = '-';
                recognitionStatus.textContent = '未开始';
                recognitionStatus.className = 'text-gray-500';
            }
        });
    </script>
</body>
</html>
